<template>
  <el-dialog
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-form label-width="100px">
      <el-form-item label="登记类型">
        <el-radio-group v-model="visitType" @change="onTypeChange">
          <el-radio v-for="(type, index) in types" :key="index" :label="type"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否正常">
        <c-radio-group v-model="params.visit_status" :options="options"></c-radio-group>
      </el-form-item>
      <el-form-item label="异常说明" v-show="params.visit_status === '0'">
        <el-input v-model="params.visit_des" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" :loading="saveLoading" @click="submit">完成</el-button>
        <el-button @click="beforeClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data: () => ({
    related: {},
    types: ['资金使用情况', '经营情况', '其他情况'],
    options: {
      1: '正常',
      0: '异常',
    },
    params: {
      visit_des: '',
      visit_status: '',
    },
    visitType: '',
  }),
  computed: {
    ...mapGetters(['user']),
  },
  watch: {
    relatedData: {
      handler: function (val) {
        if (val.customer_related_id) {
          this.related = { ...val }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initRelated()
  },
  methods: {
    beforeClose() {
      this.visitType = ''
      this.params = {
        visit_des: '',
        visit_status: '',
      }
      this.$emit('update:visible', false)
    },
    initRelated() {
      if (this.related.customer_related_id) {
        return
      }
      this.related = JSON.parse(sessionStorage.getItem('customer_related_view'))
    },
    onTypeChange(val) {
      if (val === '其他情况') {
        this.params.visit_status = '0'
        this.options = { 0: '异常' }
      } else {
        this.params.visit_status = '1'
        this.options = { 1: '正常', 0: '异常' }
      }
    },
    async submit() {
      if (this.visitType === '') {
        return this.$message.error('请选择登记类型')
      }
      if (this.params.visit_status === '') {
        return this.$message.error('请填选是否异常')
      }
      if (this.params.visit_status === '0' && !this.params.visit_des) {
        return this.$message.error('请输入异常说明')
      }

      const data = {
        customer_id: this.related.customer_id,
        customer_name: this.related.customer_name,
        customer_related_id: this.related.customer_related_id,
      }
      data.visit_status = this.params.visit_status
      data.visit_des = this.getDes()
      data.visit_person = this.user.realName || this.user.userName
      data.visit_date = this.$utils.dateFormat(new Date(), 'yyyy-MM-dd')
      data.visit_type = '7'
      this.saveLoading = true
      const [res, err] = await this.$utils.promise(
        this.$api.addData(this.$serviceName, 'credit_visit_record', data)
      )
      this.saveLoading = false
      if (res) {
        this.$message.success('管理登记成功！！')
        this.$emit('success', {})
        this.beforeClose()
      } else {
        this.$message.error(`管理登记失败，请重试！（${err.status}）`)
      }
    },
    getDes() {
      let des = `${this.visitType}：${this.options[this.params.visit_status]}`
      if (this.params.visit_status === '0') {
        des += `（${this.params.visit_des}）`
      }
      return des
    },
  },
}
</script>

<style lang="scss" scoped></style>
